import React, {Component} from 'react';
import styles from './Greeter.css';
class Tab extends Component{
	    constructor(props) {
    super(props);
    this.state = {
      display1:'inblock',
      display2:'none',
    };
  }
    handleClickk()
    {
      this.setState({display1:this.state.display1='block'});
      this.setState({display2:this.state.display2='none'})
    }
    handleClick()
    {
      this.setState({display1:this.state.display1='none'});
      this.setState({display2:this.state.display2='block'})
    }
	render() {
    return (
<div>
     <div style={{position:'absolute',width:'55%',right:'10%',top:'740px'}}>
    	  <ul style={{overflow:'hidden',zoom:'1','listStyleType':'none'}}>
              <li className={styles.tab} onClick={()=>this.handleClickk()}>宝贝详情</li>
              <li className={styles.tab} onClick={()=>this.handleClick()}>累计评论</li>
          </ul>
            <div className={styles.tabCon} style={{display:this.state.display1}}>
            <h5>品牌名称：ALLIN</h5>
            <ul>
              <li style={{width:'200px',height:'50px',float:'left',marginTop:'10px'}}>图案：纯色</li>
              <li style={{width:'200px',height:'50px',float:'left',marginTop:'10px'}}>风格：休闲</li>
              <li style={{width:'200px',height:'50px',float:'left',marginTop:'10px'}}>衣长:60CM</li>
              <li style={{width:'200px',height:'50px',float:'left',marginTop:'10px'}}>货号：12345</li>
              <li style={{width:'200px',height:'50px',float:'left',marginTop:'10px'}}>材质:棉</li>
            </ul>
            <img src={require('../img/h.jpg')} style={{width:'100%',marginTop:'50px'}} />
            <img src={require('../img/i.jpg')} style={{width:'100%',marginTop:'10px'}} />
            </div>
            <div className={styles.tabCon} style={{display:this.state.display2}}>
            <h1>暂无评论</h1>
            </div>
      </div>
      <div style={{position:'absolute',width:'250px',left:'10%',top:'740px'}}>
      <div style={{width:'250px',height:'50px',padding:'10px',backgroundColor:'#eee',border:'1px solid #eee'}}>ALLIN旗舰店</div>
      <div style={{width:'250px',padding:'20px',border:'1px solid black'}}>
         <div> <span style={{fontSize:'12px'}}>关键字:</span><input type="text" placeholder="T-shirt" style={{width:'70px',height:'25px',padding:'4px',}}></input></div>
          <div><span style={{fontSize:'12px'}}>价格:</span><input type="text" style={{width:'40px',height:'25px',padding:'4px',marginRight:'5px'}}></input>-<input  type="text" style={{width:'40px',height:'25px',padding:'4px',marginTop:'10px',marginLeft:'5px'}}></input></div>
          <button style={{width:'60px',height:'25px',backgroundColor:'#eee',marginTop:'10px',border:'1px solid #eee'}}>确定</button>
      </div>
      <img src={require('../img/j.png')} style={{width:'250px',marginTop:'50px',border:'5px solid black'}} />
      <img src={require('../img/i.png')} style={{width:'250px',marginTop:'30px',border:'5px solid black'}} />
      <img src={require('../img/k.jpeg')} style={{width:'250px',marginTop:'30px',border:'5px solid black'}} />
      </div>
</div>	
)
}
}
export default Tab